{% include 'header.html' %}
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/echarts/5.4.2/echarts.min.js"></script>
<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">收益折线图</h1>
    <div id="profitChart" style="width: 100%; height: 400px;"></div>
</div>

<script>
    var urlParams = new URLSearchParams(window.location.search);
    var stock = urlParams.get('stock');
    var start_date = urlParams.get('start_date');
    var end_date = urlParams.get('end_date');

    $.ajax({
        url: '/recalltest/get_backtest_records',
        type: 'GET',
        data: {
            stock: stock,
            start_date: start_date,
            end_date: end_date
        },
        success: function (res) {
            if (res.code === 0) {
                // 绘制收益折线图
                var myChart = echarts.init(document.getElementById('profitChart'));
                var xAxisData = [];
                if (res.data && res.data.length > 0) {
                    xAxisData = res.data.map(function (item) {
                        return item.timestamp;
                    });
                }
                var profitList = res.profit_list || [];
                var option = {
                    title: {
                        text: '收益折线图'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: res.date_list
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: profitList,
                        type: 'line',
                        symbol: 'circle', // 显示点
                        symbolSize: 8, // 点的大小
                        hoverAnimation: true // 鼠标悬停时的动画效果
                    }]
                };
                myChart.setOption(option);
            } else {
                layer.msg(res.msg);
            }
        }
    });
</script>
{% include 'footer.html' %}